<!-- 两边的浮动层 -->
<template>
	<view class="">
		<view class="kzlbox bj_sx" :class="kzlc">
			<image src="/static/page1/l1.png" class="kzlbox-picbox" @click="tohd(6)"></image>
			<image src="/static/page1/l3.png" class="kzlbox-picbox" @click="tohd(7)"></image>
			<view class="por" v-if="false">
				<image src="/static/page1/l2.png" class="kzlbox-picbox"></image>
				<view class="poa w100 lt0 bj_center kzlbox-pictxt fwb">
					54
				</view>
			</view>
		</view>

		<view class="kzrbox" :class="kzrc">
			<view class="kzrbox-picbox por" @click="opmy">
				<view :class="rc1" class="w100 h100 poa lt0" v-if="rtindex == 1">
					<image src="/static/page1/r1.png" class="w100 h100"></image>
					<view class="kzstit">
						{{$t("rt1")}}
					</view>
				</view>
				<view :class="rc2" class="w100 h100 poa lt0" v-if="rtindex == 2">
					<image src="/static/page1/r2.png" class="w100 h100"></image>
					<view class="kzstit">
						<text>{{$t("rt2")}}</text>
						<text>0:00</text>
					</view>
				</view>
			</view>

			<swiper :circular="true" :autoplay="true" :interval="3000" class="kzrbox-sw">
				<swiper-item class="w100 h100" @click="tokf">
					<image src="/static/page1/layout_1.gif" class="w100" mode="widthFix"></image>
				</swiper-item>
				<swiper-item class="w100 h100 por" @click="tohd(0)">
					<image src="/static/page1/layout_2.gif" class="w100" mode="widthFix"></image>
					<view class="kztit">
						{{$t("rt3")}}
					</view>
				</swiper-item>
				<swiper-item class="w100 h100 por" @click="tohd(3)">
					<image src="/static/page1/layout_3.gif" class="w100" mode="widthFix"></image>
					<view class="kztit">
						{{$t("rt4")}}
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script setup>
	import {
		onPageScroll,
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref,
		inject
	} from 'vue';
	const opgc = inject("opgc");
	const ophd = inject("ophd");
	let kzlc = ref("")
	let kzrc = ref("")
	let ct = ref(0)
	let ot = ref(0)
	let to = ""
	let rtindex = ref(1)
	let rc1 = ref("")
	let rc2 = ref("rtpic2")

	function tohd(v) {
		if (!getApp().globalData.userInfo) {
			opgc(1, 2)
		} else {
			ophd(v)
		}
	}
	
	function opmy(){
		if (!getApp().globalData.userInfo) {
			opgc(1, 2)
		} else {
			opgc(23,1)
		}
	}

	onPageScroll((e) => {
		ct.value = e.scrollTop
		kzlc.value = "kzlboxdh1"
		kzrc.value = "kzrboxdh1"
		if (ot.value != ct.value) {
			ot.value = ct.value
			if (to != "") {
				clearTimeout(to)
			}
		}
		to = setTimeout(function() {
			if (ot.value == ct.value) {
				kzlc.value = "kzlboxdh2"
				kzrc.value = "kzrboxdh2"
			}
		}, 1000)
	})
	let config = ref({})
	let kfurl = ref("")

	onLoad(e => {
		dtd()
	})

	function tokf() {
		config.value = getApp().globalData.config.rows
		for (var i = 0; i < config.value.length; i++) {
			if (config.value[i].name == "kfurl") {
				kfurl.value = config.value[i].value
			}
		}
		window.open(kfurl.value)
	}

	function dtd() {
		if (rc1.value == "") {
			rc1.value = "rtdh"
			setTimeout(() => {
				rtindex.value = 2
				rc1.value = "rtpic2"
				rc2.value = "rtdh2"
				dtd()
			}, 250)
		} else if (rc2.value == "rtdh2") {
			setTimeout(() => {
				rc1.value = "rtpic2"
				rc2.value = ""
				dtd()
			}, 2000)
		} else if (rc1.value == "rtpic2") {
			rc2.value = "rtdh"
			setTimeout(() => {
				rtindex.value = 1
				rc1.value = "rtdh2"
				rc2.value = "rtpic2"
				dtd()
			}, 250)
		} else if (rc1.value == "rtdh2") {
			setTimeout(() => {
				rc1.value = ""
				rc2.value = "rtpic2"
				dtd()
			}, 2000)
		}
		// if (rtindex.value == 1) {
		// 	rc1.value = "rtdh"
		// 	rc2.value = ""
		// 	setTimeout( => {
		// 		rtindex.value = 2
		// 		dtd()
		// 	}, 250)
		// } else if (rtindex.value == 2){
		// 	rc1.value = "rtdh"
		// 	rc2.value = "rtdh2"
		// }

		//rtpic2
	}
</script>

<style lang="scss">
	.kzstit {
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 20rpx;
		font-weight: bold;
		font-size: 22rpx;
		text-align: center;
		padding: 0 22rpx;
	}

	.kztit {
		height: 44rpx;
		line-height: 44rpx;
		font-size: 22rpx;
		font-weight: bold;
		text-align: center;
		background: linear-gradient( 180deg, #00802B 0%, #06C045 100%);
		border-radius: 100rpx;
		position: absolute;
		bottom: 0;
		width: 100%;
	}

	.kzlbox {
		position: fixed;
		bottom: 354rpx;
		left: 22rpx;

		&-picbox {
			position: relative;
			width: 160rpx;
			height: 160rpx;
			margin-bottom: 20rpx;

		}

		&-pictxt {
			position: absolute;
			padding-top: 62rpx;
			color: #060C32;
			font-size: 36rpx;
		}
	}

	.kzlboxdh1 {
		transform: translateX(0%);
		animation: kzlboxdh1d 0.1s 1 linear;
		animation-fill-mode: forwards;
	}

	@keyframes kzlboxdh1d {
		0% {
			transform: translateX(0%);
		}

		100% {
			transform: translateX(-60%);
		}
	}

	.kzlboxdh2 {
		transform: translateX(-60%);
		animation: kzlboxdh2d 0.1s 1 linear;
		animation-fill-mode: forwards;
	}

	@keyframes kzlboxdh2d {
		0% {
			transform: translateX(-60%);
		}

		100% {
			transform: translateX(0%);
		}
	}

	.kzrbox {
		position: fixed;
		bottom: 354rpx;
		right: 22rpx;

		&-picbox {
			width: 160rpx;
			height: 160rpx;
			margin-bottom: 36rpx;
		}

		&-sw {
			width: 160rpx;
			height: 190rpx;
		}
	}

	.kzrboxdh1 {
		transform: translateX(0%);
		animation: kzrboxdh1d 0.1s 1 linear;
		animation-fill-mode: forwards;
	}

	@keyframes kzrboxdh1d {
		0% {
			transform: translateX(0%);
		}

		100% {
			transform: translateX(60%);
		}
	}

	.kzrboxdh2 {
		transform: translateX(60%);
		animation: kzrboxdh2d 0.1s 1 linear;
		animation-fill-mode: forwards;
	}

	@keyframes kzrboxdh2d {
		0% {
			transform: translateX(60%);
		}

		100% {
			transform: translateX(0%);
		}
	}

	/* PC端适配 */
	@media (min-width: 768px) {
		.kzlbox {
			left: calc(50vw - 375rpx) !important;
			width: 160rpx !important;
		}

		.kzrbox {
			right: calc(50vw - 375rpx) !important;
			width: 160rpx !important;
		}
	}

	.rtpic2 {
		transform: rotateY(-90deg);
	}

	.rtdh {
		animation: rtdhd 0.25s linear 1;
		animation-fill-mode: forwards;
	}

	@keyframes rtdhd {

		0% {
			transform: rotateY(0);
		}

		100% {
			transform: rotateY(90deg);
		}
	}

	.rtdh2 {
		animation: rtdh2d 0.25s linear 1;
		animation-fill-mode: forwards;
	}

	@keyframes rtdh2d {
		0% {
			transform: rotateY(-90deg);
		}

		100% {
			transform: rotateY(0);
		}


	}
</style>